<template>
  <div class="clearFix echa wrap">
    <h2 style="text-align: center;font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;">全国省市数据量新增统计</h2>
    <div class="cityld" style="text-align: center;">
      <label for="">省级/市级</label>
      <select name="" ref="ss" style="width: 80px; height: 26px;margin-left: 20px;" @change="ss()">
        <option value="0">省级</option>
        <option value="1">市级</option>
      </select>
      <label style="margin-left: 20px;">省份：</label>
      <select v-model="proId" style="width: 150px; height: 26px;margin-left: 20px;" @change="changePro()" ref="proname">
        <option v-for="item in allpro" :key="item.id" v-bind:value="item.cityId">{{item.cityName}}</option>
      </select>
      <label style="margin-left: 20px;" v-show="showCity == '1'">市级：</label>
      <select v-model="cityId" style="width: 150px; height: 26px;margin-left: 20px;" @change="changeCity(cityId)" ref="cityname" v-show="showCity == '1'">
        <option v-for="item in allcity" :key="item.id" v-bind:value="item.cityId">{{item.cityName}}</option>
      </select>
      <label style="margin-left: 20px;">时间：</label>
      <select v-model="year" @change="changeS()" style="width: 150px; height: 26px;margin-left: 20px;">
        <option v-for="item in years" :key="item.id" v-bind:value="item">{{item}}</option>
      </select>
      <label style="margin-left: 20px;">单位：</label>
      <select v-model="mrdanwei" @change="cd()" style="width: 80px; height: 26px;margin-left: 20px;">
        <option v-for="item in danwei" :key="item.id" v-bind:value="item.name">{{item.name}}</option>
      </select>
    </div>
    <div style="margin-top: 25px;height: 500px;width: 100%;box-sizing: content-box">
      <div id='linebbg' style="width:750px;height: 500px;box-sizing: content-box;float: left"></div>
      <div id='piebbg' style="width:400px;height: 500px;box-sizing: content-box;float: right"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showCity: 0,
      proId: '11',
      cityId: '110101',
      proname: '',
      allpro: [],
      cityname: '',
      locName: '',
      allcity: [],
      citybbg: '',
      options: {},
      year: '',
      years: [],
      data1: [],
      data2: [],
      mrdanwei: '月',
      danwei: [{name: '月', type: 0}, {name: '季度', type: 1}],
      dataMon: [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
      dataMon1: [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
      dataMonAll: [0, 0, 0, 0, 0, 0, 0],
      dataMonAll1: [0, 0, 0, 0, 0, 0, 0],
      dataJi: [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]],
      dataJi1: [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]]
    }
  },
  mounted () {
    this.year = new Date().getFullYear()
    this.nowyear = this.year
    this.years = [this.year, this.year - 1, this.year - 2]
    this.initProCity()
    this.findpro().then((data) => {
      this.proname = data[0].cityName
      this.proId = data[0].cityId
      this.allpro = data
      this.findCity().then((data) => {
        this.cityname = data[0].cityName || this.proname
        this.cityId = data[0].cityId
        this.allcity = data || []
        this.getdata(this.year)
      })
    })
  },
  methods: {
    cd () {
      this.setop(this.mrdanwei)
    },
    ss () {
      this.showCity = this.$refs.ss.options[this.$refs.ss.selectedIndex].value
      this.getdata()
    },
    // 点击省份
    changePro () {
      this.proname = this.$refs.proname.options[this.$refs.proname.selectedIndex].text
      this.findCity(this.proId).then(data => {
        this.cityname = data[0].cityName || this.proname
        this.cityId = data[0].cityId
        this.allcity = data
        this.getdata(this.year)
      }).catch(data => {
        this.cityname = this.proname
        this.allcity = []
      })
    },
    // 点击省份
    changeCity () {
      this.cityname = this.$refs.cityname.options[this.$refs.cityname.selectedIndex].text
      this.getdata(this.year)
    },
    changeS () {
      this.getdata()
    },
    initProCity () {
      // var self = this
      // 折线
      this.linebbg = window.echarts.init(document.getElementById('linebbg'))
      // 饼图
      this.piebbg = window.echarts.init(document.getElementById('piebbg'))
      // 显示标题，图例和空的坐标轴
      this.linebbg.setOption({
        title: {
          text: '新增数据量',
          textStyle: {
            color: '#666',
            fontSize: '12'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: '100',
          data: ['信用动态', '政策法规', '信息公示', '联合奖惩', '红名单', '黑名单', '政务诚信']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '信用动态',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '政策法规',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '信息公示',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '联合奖惩',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '红名单',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '黑名单',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '政务诚信',
            type: 'line',
            stack: '总量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      })
      //  显示饼图
      this.piebbg.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          data: ['信用动态', '政策法规', '信息公示', '联合奖惩', '红名单', '黑名单', '政务诚信']
        },
        series: [
          {
            name: '新增数据量',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: [
              {value: 335, name: '信用动态'},
              {value: 310, name: '政策法规'},
              {value: 234, name: '信息公示'},
              {value: 135, name: '联合奖惩'},
              {value: 1548, name: '红名单'},
              {value: 1548, name: '黑名单'},
              {value: 1548, name: '政务诚信'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    findpro () {
      var self = this
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findsheng.do?cityId=10007').then(function (res) {
          resolve(res.data)
        })
      })
    },
    findCity (id) {
      var self = this
      var grade = id || 11
      return new Promise(function (resolve, reject) {
        self.axios.get(self.api + '/monitor/cityController/findnext.do?grade=' + grade).then(function (res) {
          resolve(res.data)
        }).catch(function (res) {
          resolve(res.data)
        })
      })
    },
    getdata () {
      var self = this
      if (self.showCity === '1') {
        self.locName = self.cityname
      } else {
        self.locName = self.proname
      }
      self.axios.post(self.api + '/monitor/dataCleanController/findPCXZ.do', self.qs.stringify({type: Number(self.showCity), locName: self.locName, year: self.year})).then(function (res) {
        if (res.data.msg === 'success') {
          self.delData(res.data.data)
        } else {
          if (self.mrdanwei === '季度') {
            self.linebbg.setOption({
              xAxis: {
                data: ['第一季度', '第二季度', '第三季度', '第四季度']
              },
              series: [
                {data: self.dataJi1[0]},
                {data: self.dataJi1[1]},
                {data: self.dataJi1[2]},
                {data: self.dataJi1[3]},
                {data: self.dataJi1[4]},
                {data: self.dataJi1[5]},
                {data: self.dataJi1[6]}
              ]
            })
            self.piebbg.setOption({
              series: {
                data: [
                  {value: self.dataMonAll1[0], name: '信用动态'},
                  {value: self.dataMonAll1[1], name: '政策法规'},
                  {value: self.dataMonAll1[2], name: '信息公示'},
                  {value: self.dataMonAll1[3], name: '联合奖惩'},
                  {value: self.dataMonAll1[4], name: '红名单'},
                  {value: self.dataMonAll1[5], name: '黑名单'},
                  {value: self.dataMonAll1[6], name: '政务诚信'}
                ]
              }
            })
          } else {
            self.linebbg.setOption({
              xAxis: {
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
              },
              series: [
                {data: self.dataMon1[0]},
                {data: self.dataMon1[1]},
                {data: self.dataMon1[2]},
                {data: self.dataMon1[3]},
                {data: self.dataMon1[4]},
                {data: self.dataMon1[5]},
                {data: self.dataMon1[6]}
              ]
            })
            self.piebbg.setOption({
              series: {
                data: [
                  {value: self.dataMonAll1[0], name: '信用动态'},
                  {value: self.dataMonAll1[1], name: '政策法规'},
                  {value: self.dataMonAll1[2], name: '信息公示'},
                  {value: self.dataMonAll1[3], name: '联合奖惩'},
                  {value: self.dataMonAll1[4], name: '红名单'},
                  {value: self.dataMonAll1[5], name: '黑名单'},
                  {value: self.dataMonAll1[6], name: '政务诚信'}
                ]
              }
            })
          }
        }
      })
    },
    delData (arr) {
      var slef = this
      arr.map(function (item, key) {
        for (var i = 0; i < 7; i++) {
          var bgarr = ['xydt', 'zcfg', 'xxgs', 'lhjc', 'hongmd', 'heimd', 'zwcx']
          slef.dataMon[i][key] = item[bgarr[i]]
        }
      })
      slef.dataMon.map(function (item, key) {
        item.map(function (aa) {
          slef.dataMonAll[key] += aa
        })
      })
      slef.dataMon.map(function (item, key) {
        var tempArr = []
        var k = 0
        for (var i = 0; i < item.length; i += 3) {
          tempArr[k] = item[i] + item[i + 1] + item[i + 2]
          k++
        }
        slef.dataJi[key] = tempArr
      })
      slef.setop(slef.mrdanwei)
    },
    setop (danwei) {
      var aa = danwei || '月'
      var slef = this
      if (aa === '季度') {
        this.linebbg.setOption({
          xAxis: {
            data: ['第一季度', '第二季度', '第三季度', '第四季度']
          },
          series: [
            {data: slef.dataJi[0]},
            {data: slef.dataJi[1]},
            {data: slef.dataJi[2]},
            {data: slef.dataJi[3]},
            {data: slef.dataJi[4]},
            {data: slef.dataJi[5]},
            {data: slef.dataJi[6]}
          ]
        })
        this.piebbg.setOption({
          series: {
            data: [
              {value: slef.dataMonAll[0], name: '信用动态'},
              {value: slef.dataMonAll[1], name: '政策法规'},
              {value: slef.dataMonAll[2], name: '信息公示'},
              {value: slef.dataMonAll[3], name: '联合奖惩'},
              {value: slef.dataMonAll[4], name: '红名单'},
              {value: slef.dataMonAll[5], name: '黑名单'},
              {value: slef.dataMonAll[6], name: '政务诚信'}
            ]
          }
        })
      } else {
        this.linebbg.setOption({
          xAxis: {
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          series: [
            {data: slef.dataMon[0]},
            {data: slef.dataMon[1]},
            {data: slef.dataMon[2]},
            {data: slef.dataMon[3]},
            {data: slef.dataMon[4]},
            {data: slef.dataMon[5]},
            {data: slef.dataMon[6]}
          ]
        })
        this.piebbg.setOption({
          series: {
            data: [
              {value: slef.dataMonAll[0], name: '信用动态'},
              {value: slef.dataMonAll[1], name: '政策法规'},
              {value: slef.dataMonAll[2], name: '信息公示'},
              {value: slef.dataMonAll[3], name: '联合奖惩'},
              {value: slef.dataMonAll[4], name: '红名单'},
              {value: slef.dataMonAll[5], name: '黑名单'},
              {value: slef.dataMonAll[6], name: '政务诚信'}
            ]
          }
        })
      }
    }
  }
}
</script>

<style lang="" scoped>
  .zhishuRank{
    margin-top: 40px;
    border: 1px solid rgba(0,0,0,0);
    box-shadow: #f1f1f1 0 0 10px 5px;
    height: 575px;
    padding: 40px 20px 20px;
  }
  .huoyueTitle{
    display: inline-block;
    font-size: 20px;
    padding-bottom: 10px;
    color: #e81d1d;
    border-bottom: 2px solid #e81d1d;
  }
  .zhishuRank .table{
    margin-top: 50px;
  }
  .zhishuRank .table table thead th{
    font-size: 16px;
    color: #666;
  }
  .zhishuRank .table table tr,th,td{
    border: 1px solid #e5e5e5;
    height: 60px;
    text-align: center;
  }
  .zhishuRank .table table tbody{
    font-size: 14px;
    color: #999;
  }
  .zhishuRank .table table thead{
    background-color: #e2f8ff;
  }
  .shenduTitle{
    text-align: center;
    font-size: 16px;
    color: #666666;
  }
</style>
